<template>
    <div class="ml-16px mr-16px content-container">
        <div class="pl-26px pt-26px pr-26px pb-16px">
            <Search @search="handleSearch" />
            <el-table :data="state.tableData" v-loading="state.isLoading" style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="index" :index="indexMethod" label="序号" align="center" width="60">
                </el-table-column>                
                <el-table-column width="200" prop="Keyword" align="center" label="关键词" />
                <el-table-column width="180" prop="Picture" align="center" label="文章图片">
                    <template v-slot="scope">
                        <router-link :to="'/geo/project-management/article/detail/' + scope.row.ID">
                            <img :src="scope.row.Picture" alt="" class="w-80px h-50px object-cover" 
                                 v-if="scope.row.Picture" />
                        </router-link>
                    </template>
                </el-table-column>
                <el-table-column prop="ArticleTitle" align="center" label="文章标题" />
                <el-table-column width="320" align="center" label="操作">
                    <template v-slot="scope">
                        <el-button type="primary" plain @click="handleToArticleDetail(scope.row.ID)">查看</el-button>
                        <el-button type="warning" plain @click="handleToArticleEdit(scope.row.ID)">修改</el-button>
                        <el-button type="danger" plain @click="handleArticleDelete(scope.row.ID)">删除</el-button>
                        <el-button type="success" plain @click="handleToStatistics(scope.row.ID)">统计</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="flex flex-center pb-16px page-container">
            <Pagination v-if="state.tableData.length > 0" v-model:total="state.page.total"
                v-model:page="state.page.curPage" v-model:limit="state.page.pageSizes" :autoScroll="false"
                @pagination="handlePage" />
        </div>
        <Platform v-model:isPlatform="state.isPlatform" :platforms="state.platforms"
            @closeDialog="state.isPlatform = false" @confirm="handleConfirm" />
    </div>
</template>

<script setup lang="ts">
import { getArticleListApi, batchPublishArticleApi,publishTechArticleApi,deleteArticleApi } from '@/api/geo'
import { IPlatform,ITechItem } from '@/api/geo/types'
import { confirmMessageBox } from '@/utils/elMessageBox'
import { WarningFilled, SuccessFilled } from '@element-plus/icons-vue'
import Search from './components/Search.vue'
import Platform from './components/Platform.vue'

const route = useRoute()

const router = useRouter()

const state = reactive({
    tableData: <ITechItem[]>[],
    platforms: <IPlatform[]>[],
    keyword: '',
    title: '',
    page: {
        total: 0,
        curPage: 1,
        limit: 20,
        pageSizes: 20,
    },
    isLoading: true,
    isPlatform: false,
    platformID: 0
})

const publishArray = ref<number[]>([])

const selectionData = ref([])

onMounted(() => {
    getArticleList()
})

async function getArticleList() {
    const res: ResType = await getArticleListApi({
        id: Number(route.params.id) || 0,
        keyword: state.keyword,
        title: state.title,
        pn: state.page.curPage,
        pagesize: state.page.pageSizes
    })
    if (res.code === 200) {
        state.isLoading = false
        state.tableData = res.data
        state.page.curPage = res.page as number
        state.page.pageSizes = res.pagesize as number
        state.page.total = res.count
        state.platforms = res.platformlist
        
        res.data.forEach((item: ITechItem) => {
            if (item.ArticleState === 2) {
                publishArray.value.push(item.ID)
            }
        });
    }
}

function handleToArticleDetail(id: number) {
    router.push({
        path: '/geo/project-management/article/detail/' + id
    })
}

function handleToArticleEdit(id: number) {
    router.push({
        path: '/geo/project-management/article/edit/' + id
    })
}

async function handleArticleDelete(id: number) {
    confirmMessageBox(WarningFilled, '删除文章会同步删除已发布平台的文章数据，确认删除？', '','',async () => {
        const res = await deleteArticleApi({
            id: id
        })
        if (res.code === 200) {
            getArticleList()
            ElMessage({
                type: 'success',
                message: '删除成功!',
            })
        }
    })
}

function handlePage(value: any) {
    state.page.limit = value.limit
    getArticleList()
}

function indexMethod(index: number) {
    return (state.page.curPage - 1) * state.page.limit + index + 1
}

async function handleBatchPublish() {
    if (!selectionData.value.length) {
        confirmMessageBox(WarningFilled, '请选择多个要批量发布的文章？')
    } else {
        //state.isPlatform = true
        try {
            const res: ResType = await publishTechArticleApi({
                id: state.platformID,
                ids: selectionData.value
            })
            if (res.code === 200) {
                confirmMessageBox(SuccessFilled, res.message)
                getArticleList()
            }
        } catch (error: any) {
            if (error.response && error.response.status === 405) {
                confirmMessageBox(WarningFilled, error.response.message)
            }
        }
    }
}

function handleSelectionChange(rows: any) {
    selectionData.value = rows.map((row: any) => row.ID)
}

function handleSearch(value: any) {
    state.keyword = value.keyword
    state.title = value.title
    state.page.curPage = 1
    getArticleList()
}

function handlePlatform(id: number) {
    state.isPlatform = true
    state.platformID = id
}

async function handleConfirm(platform: string) {
    try {
        const res: ResType = await batchPublishArticleApi({
            id: state.platformID,
            platform: platform,
            ids: selectionData.value
        })
        if (res.code === 200) {
            confirmMessageBox(SuccessFilled, res.message)
            getArticleList()
        }
    } catch (error: any) {
        if (error.response && error.response.status === 405) {
            confirmMessageBox(WarningFilled, error.response.message)
        }
    }
    state.isPlatform = false
}

function handleToStatistics(id: number) {
    router.push({
        path: '/geo/project-management/article/statistics/' + id
    })
}
</script>

<style scoped></style>